<style>
    .app-content {
        position: relative;
        z-index: 9;
        top: 0;
        padding: 0 0 0 0;
        box-sizing: border-box;
    }
    .navbar-fixed-top .content-wrapper {
        padding-top: 0!important;
        padding-right: 0!important;
    }

    .content-body {
        padding: 0px!important;
        margin-top:0!important;
        background: none;
        border-radius: 0;
    }
    .login-header {
        position: absolute;
        /*height: 64px;*/
        background-color: #ffffff6b;
        top: 0;
        width: 100%;
    }
    .wrap {
        position: relative;
        width: 1200px;
        margin: 0 auto;
        z-index: 1;
    }
    .login-header h1 {
        margin: 0;
        padding: 5px 0 5px;
        line-height: 38px;
        font-size: 0;
    }
    .login-header h1 img {
        display: inline-block;
        height: 38px;
        object-fit: cover;
    }
    .login-page {
        background: url("{{ admin_asset('/static/images/bg.png')}}");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .login-box {
        padding-top: 20px;
        background-color: #fff;
        box-shadow: 0px 3px 12px 0px rgb(0 26 128 / 5%);
        border-radius: 4px;
    }
    .login-card-body {
        padding: 1.5rem 1.8rem 1.6rem;
    }
    .card, .card-body {
        border-radius: .25rem
    }
    .login-btn {
        padding-left: 2rem !important;;
        padding-right: 1.5rem !important;
    }
    .content {
        overflow-x: hidden;
    }
    .left {
        float: left;
        margin-top: 90px;
    }
    .right {
        position: relative;
        float: right;
        top: 90px;
    }
    .form-group .control-label {
        text-align: left;
    }
    .left .title {
        width: 760px;
    }
    .left .title h2 {
        font-size: 40px;
        font-weight: 700;
        color: #000;
        margin: 0 0 10px;
        padding: 0;
        line-height: 1.5em;
    }
    .left .title p {
        font-size: 14px;
        text-indent: 2em;
        color: #797A80;
    }
    .left .secure-tip {
        margin-top: 150px;
    }
    .left .secure-tip h5 {
        font-size: 14px;
        color: #000;
        border-bottom: 1px solid #CBD3E5;
        padding: 0 0 10px 0;
        margin-bottom: 15px;
    }
    .left .secure-tip h5 img {
        display: inline-block;
        width: 16px;
        height: 16px;
        vertical-align: middle;
        margin: -2px 3px 0 0;
    }
    .left .secure-tip p {
        font-size: 13px;
        color: #797A80;
        line-height: 2em;
        padding-right: 5px;
    }
    footer {
        position: absolute;
        bottom: -20px;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 12px;
        color: #919399;
    }
    .right .login-logo {
        border-bottom: 1px solid #EBEEF2;
        list-style: none;
        padding: 0;
        margin: 0 0 30px;
        text-align: center;
    }
    .right .login-logo span {
        display: inline-block;
        margin-right: 0px;
        position: relative;
        font-size: 18px;
        color: #1973FF;
        font-weight: 700;
        line-height: 60px;
        cursor: pointer;
    }
</style>
<div class="login-page">
    <header class="login-header">
        <div class="wrap form-inline" style="justify-content: space-between;">
            <div class="login-left">
                <h1><img src="{{ admin_asset('/static/images/login_logo.png')}}" alt=""></h1>
            </div>
            <div class="login-right">
                <a href="/" class="login-btn">首页</a>
                <a href="https://help.youmengcms.com" class="login-btn">新手帮助</a>
                <a href="https://feedback.youmengcms.com" class="login-btn">问题反馈</a>
                <a href="https://addons.youmengcms.com" class="login-btn">应用商城</a>
            </div>
        </div>
    </header>
    <div class="wrap">
        <div class="left">
            <div class="title">
                <h2>{{ admin_trans('admin.welcome_back') }}</h2>
                <p>{{ admin_trans('admin.welcome_back_msg1') }}</p>
                <p>{{ admin_trans('admin.welcome_back_msg2') }}</p>
                <p>{{ admin_trans('admin.welcome_back_msg3') }}</p>
            </div>
            <div class="secure-tip">
                <h5>
                    <img src="{{ admin_asset('/static/images/login-secure-tip.png') }}">
                    {{ admin_trans('admin.welcome_safe') }}
                </h5>
                <p>{{ admin_trans('admin.welcome_safe_msg1') }} <br>{{ admin_trans('admin.welcome_safe_msg2') }}</p>
            </div>
        </div>
        <div class="right">
            <div class="login-box">
                <div class="login-logo mb-2">
                    <span>{{ admin_trans('admin.welcome_admin_login') }}</span>
                </div>
                <div class="card">
                    <div class="card-body login-card-body">

                        <form id="login-form" method="POST" action="{{ admin_url('auth/login') }}">

                            <input type="hidden" name="_token" value="{{ csrf_token() }}"/>

                            <fieldset class="form-label-group form-group position-relative has-icon-left">
                                <input
                                    type="text"
                                    class="form-control {{ $errors->has('username') ? 'is-invalid' : '' }}"
                                    name="username"
                                    placeholder="{{ trans('admin.username') }}"
                                    value="{{ old('username') }}"
                                    required
                                    autofocus
                                >

                                <div class="form-control-position">
                                    <i class="feather icon-user"></i>
                                </div>

                                <label for="email">{{ trans('admin.username') }}</label>

                                <div class="help-block with-errors"></div>
                                @if($errors->has('username'))
                                <span class="invalid-feedback text-danger" role="alert">
                                            @foreach($errors->get('username') as $message)
                                    <span class="control-label" for="inputError"><i class="feather icon-x-circle"></i> {{$message}}</span><br>
                                @endforeach
                                        </span>
                                @endif
                            </fieldset>

                            <fieldset class="form-label-group form-group position-relative has-icon-left">
                                <input
                                    minlength="5"
                                    maxlength="20"
                                    id="password"
                                    type="password"
                                    class="form-control {{ $errors->has('password') ? 'is-invalid' : '' }}"
                                    name="password"
                                    placeholder="{{ trans('admin.password') }}"
                                    required
                                    autocomplete="current-password"
                                >

                                <div class="form-control-position">
                                    <i class="feather icon-lock"></i>
                                </div>
                                <label for="password">{{ trans('admin.password') }}</label>

                                <div class="help-block with-errors"></div>
                                @if($errors->has('password'))
                                <span class="invalid-feedback text-danger" role="alert">
                                            @foreach($errors->get('password') as $message)
                                    <span class="control-label" for="inputError"><i class="feather icon-x-circle"></i> {{$message}}</span><br>
                                @endforeach
                                            </span>
                                @endif

                            </fieldset>
                            <div class="form-group d-flex justify-content-between align-items-center">
                                <div class="text-left">
                                    @if(config('admin.auth.remember'))
                                    <fieldset class="checkbox">
                                        <div class="vs-checkbox-con vs-checkbox-primary">
                                            <input id="remember" name="remember"  value="1" type="checkbox" {{ old('remember') ? 'checked' : '' }}>
                                            <span class="vs-checkbox">
                                                        <span class="vs-checkbox--check">
                                                          <i class="vs-icon feather icon-check"></i>
                                                        </span>
                                                    </span>
                                            <span> {{ trans('admin.remember_me') }}</span>
                                        </div>
                                    </fieldset>
                                    @endif
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary float-right login-btn">

                                {{ __('admin.login') }}
                                &nbsp;
                                <i class="feather icon-arrow-right"></i>
                            </button>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
Ym.ready(function () {
    // ajax表单提交
    $('#login-form').form({
        validate: true,
    });
});
</script>
